<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员简历 - 张三</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2a2e35;
            --secondary: #1e2227;
            --accent: #64ffda;
            --text-primary: #e6f1ff;
            --text-secondary: #8892b0;
            --font-mono: 'Fira Code', monospace;
            --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏样式 */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: rgba(30, 34, 39, 0.8);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 20px 0;
            transition: var(--transition);
        }

        header.scrolled {
            padding: 15px 0;
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--accent);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: var(--text-primary);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            padding: 10px 0;
            position: relative;
        }

        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--accent);
            transition: var(--transition);
        }

        .nav-links a:hover:after {
            width: 100%;
        }

        .nav-links a:hover {
            color: var(--accent);
        }

        /* 英雄区域样式 */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 80px;
        }

        .hero-content {
            max-width: 800px;
        }

        .greeting {
            color: var(--accent);
            font-family: var(--font-mono);
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .hero-name {
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 10px;
            line-height: 1.1;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        .hero-description {
            font-size: 1.2rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin-bottom: 40px;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background-color: transparent;
            color: var(--accent);
            border: 1px solid var(--accent);
            border-radius: 4px;
            font-family: var(--font-mono);
            text-decoration: none;
            transition: var(--transition);
            cursor: pointer;
        }

        .cta-button:hover {
            background-color: rgba(100, 255, 218, 0.1);
            transform: translateY(-3px);
        }

        /* 章节通用样式 */
        section {
            padding: 100px 0;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 50px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .section-title:after {
            content: '';
            display: block;
            width: 300px;
            height: 1px;
            margin-left: 20px;
            background-color: var(--text-secondary);
        }

        /* 关于区域样式 */
        .about-content {
            display: grid;
            grid-template-columns: 3fr 2fr;
            gap: 50px;
        }

        .about-text p {
            margin-bottom: 20px;
            color: var(--text-secondary);
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(140px, 200px));
            gap: 10px;
            margin-top: 30px;
        }

        .skill-item {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            color: var(--text-secondary);
            position: relative;
            padding-left: 20px;
        }

        .skill-item:before {
            content: '▹';
            position: absolute;
            left: 0;
            color: var(--accent);
        }

        /* 经验区域样式 */
        .experience-tabs {
            display: flex;
            margin-bottom: 30px;
        }

        .tab-button {
            padding: 10px 20px;
            background: transparent;
            border: none;
            border-left: 2px solid var(--text-secondary);
            color: var(--text-secondary);
            font-family: var(--font-mono);
            text-align: left;
            cursor: pointer;
            transition: var(--transition);
        }

        .tab-button.active {
            border-left: 2px solid var(--accent);
            color: var(--accent);
            background-color: rgba(100, 255, 218, 0.1);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .job-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .company {
            color: var(--accent);
            font-family: var(--font-mono);
            margin-bottom: 20px;
        }

        .job-period {
            color: var(--text-secondary);
            font-family: var(--font-mono);
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .job-description {
            color: var(--text-secondary);
        }

        .job-description ul {
            list-style: none;
        }

        .job-description li {
            margin-bottom: 10px;
            position: relative;
            padding-left: 20px;
        }

        .job-description li:before {
            content: '▹';
            position: absolute;
            left: 0;
            color: var(--accent);
        }

        /* 项目区域样式 */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

        .project-card {
            background-color: var(--secondary);
            border-radius: 5px;
            padding: 30px;
            transition: var(--transition);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .project-card:hover {
            transform: translateY(-5px);
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .folder-icon {
            color: var(--accent);
            font-size: 2.5rem;
        }

        .project-links a {
            color: var(--text-primary);
            margin-left: 15px;
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .project-links a:hover {
            color: var(--accent);
        }

        .project-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

        .project-description {
            color: var(--text-secondary);
            flex-grow: 1;
            margin-bottom: 20px;
        }

        .project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tech-item {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* 联系区域样式 */
        .contact-content {
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
        }

        .contact-text {
            color: var(--text-secondary);
            margin-bottom: 40px;
        }

        /* 页脚样式 */
        footer {
            text-align: center;
            padding: 30px 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .social-links a {
            color: var(--text-primary);
            font-size: 1.5rem;
            transition: var(--transition);
        }

        .social-links a:hover {
            color: var(--accent);
            transform: translateY(-3px);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-name {
                font-size: 3rem;
            }
            
            .hero-title {
                font-size: 2rem;
            }
            
            .about-content {
                grid-template-columns: 1fr;
            }
            
            .section-title:after {
                width: 100px;
            }
            
            .nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header id="header">
        <div class="container">
            <nav>
                <a href="#" class="logo">ZH</a>
                <ul class="nav-links">
                    <li><a href="#about">关于</a></li>
                    <li><a href="#experience">经验</a></li>
                    <li><a href="#projects">项目</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <p class="greeting">你好，我的名字是</p>
                <h1 class="hero-name">张三</h1>
                <h2 class="hero-title">全栈开发工程师</h2>
                <p class="hero-description">
                    我是一名专注于创建高效、用户友好的Web应用程序的软件工程师。
                    目前致力于使用现代技术栈开发创新的数字解决方案。
                </p>
                <a href="#projects" class="cta-button">查看我的项目</a>
            </div>
        </div>
    </section>

    <!-- 关于区域 -->
    <section id="about">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>你好！我是张三，一名对创造数字体验充满热情的全栈开发工程师。</p>
                    <p>
                        我的开发之旅始于5年前，当时我学习了HTML和CSS的基础知识。
                        从那时起，我不断扩展技能范围，现在专注于使用React、Node.js
                        和现代JavaScript生态系统构建全栈应用程序。
                    </p>
                    <p>
                        我热衷于编写清晰、高效和可维护的代码，并始终关注行业最佳实践和新兴技术。
                    </p>
                    <p>以下是我日常使用的一些技术：</p>
                    <div class="skills-grid">
                        <div class="skill-item">JavaScript (ES6+)</div>
                        <div class="skill-item">TypeScript</div>
                        <div class="skill-item">React</div>
                        <div class="skill-item">Node.js</div>
                        <div class="skill-item">Express</div>
                        <div class="skill-item">MongoDB</div>
                        <div class="skill-item">PostgreSQL</div>
                        <div class="skill-item">Git</div>
                    </div>
                </div>
                <div class="about-image">
                    <!-- 这里可以放置个人照片 -->
                </div>
            </div>
        </div>
    </section>

    <!-- 经验区域 -->
    <section id="experience">
        <div class="container">
            <h2 class="section-title">工作经验</h2>
            <div class="experience-tabs">
                <button class="tab-button active">科技公司A</button>
                <button class="tab-button">科技公司B</button>
                <button class="tab-button">科技公司C</button>
            </div>
            <div class="tab-content active">
                <h3 class="job-title">高级全栈工程师</h3>
                <p class="company">科技公司A</p>
                <p class="job-period">2021年1月 - 至今</p>
                <div class="job-description">
                    <ul>
                        <li>领导开发团队构建和维护高性能Web应用程序</li>
                        <li>实现微服务架构，将单体应用分解，提高系统可扩展性</li>
                        <li>引入自动化测试流程，将测试覆盖率从20%提高到85%</li>
                        <li>优化数据库查询，将API响应时间减少40%</li>
                        <li>指导初级开发人员，进行代码审查和技术分享</li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <h3 class="job-title">前端开发工程师</h3>
                <p class="company">科技公司B</p>
                <p class="job-period">2019年6月 - 2020年12月</p>
                <div class="job-description">
                    <ul>
                        <li>使用React和Redux开发响应式用户界面</li>
                        <li>与UI/UX设计师合作实现设计系统</li>
                        <li>优化前端性能，减少页面加载时间35%</li>
                        <li>实施可访问性最佳实践，确保WCAG 2.1合规性</li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <h3 class="job-title">软件开发工程师</h3>
                <p class="company">科技公司C</p>
                <p class="job-period">2018年1月 - 2019年5月</p>
                <div class="job-description">
                    <ul>
                        <li>使用Angular和Node.js开发Web应用程序</li>
                        <li>参与敏捷开发流程，完成每周迭代任务</li>
                        <li>编写技术文档和用户手册</li>
                        <li>修复现有代码库中的错误并实施改进</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目区域 -->
    <section id="projects">
        <div class="container">
            <h2 class="section-title">精选项目</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <div class="project-header">
                        <div class="folder-icon">
                            <i class="fa-regular fa-folder"></i>
                        </div>
                        <div class="project-links">
                            <a href="#"><i class="fa-brands fa-github"></i></a>
                            <a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                        </div>
                    </div>
                    <h3 class="project-title">企业资源规划系统</h3>
                    <p class="project-description">
                        一个全面的ERP解决方案，集成财务管理、人力资源、库存管理和客户关系管理功能。
                    </p>
                    <div class="project-tech">
                        <span class="tech-item">React</span>
                        <span class="tech-item">Node.js</span>
                        <span class="tech-item">MongoDB</span>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-header">
                        <div class="folder-icon">
                            <i class="fa-regular fa-folder"></i>
                        </div>
                        <div class="project-links">
                            <a href="#"><i class="fa-brands fa-github"></i></a>
                            <a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                        </div>
                    </div>
                    <h3 class="project-title">电子商务平台</h3>
                    <p class="project-description">
                        一个功能齐全的电子商务网站，具有产品目录、购物车、支付集成和管理面板。
                    </p>
                    <div class="project-tech">
                        <span class="tech-item">Vue.js</span>
                        <span class="tech-item">Express</span>
                        <span class="tech-item">PostgreSQL</span>
                    </div>
                </div>
                <div class="project-card">
                    <div class="project-header">
                        <div class="folder-icon">
                            <i class="fa-regular fa-folder"></i>
                        </div>
                        <div class="project-links">
                            <a href="#"><i class="fa-brands fa-github"></i></a>
                            <a href="#"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                        </div>
                    </div>
                    <h3 class="project-title">任务管理应用</h3>
                    <p class="project-description">
                        一个协作任务管理工具，具有看板视图、团队协作、实时更新和进度跟踪功能。
                    </p>
                    <div class="project-tech">
                        <span class="tech-item">Angular</span>
                        <span class="tech-item">Firebase</span>
                        <span class="tech-item">Material UI</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系区域 -->
    <section id="contact">
        <div class="container">
            <h2 class="section-title">联系我</h2>
            <div class="contact-content">
                <p class="contact-text">
                    目前我正在寻找新的职业机会。如果您有适合我的职位，
                    或者只是想打个招呼，请随时与我联系！
                </p>
                <a href="mailto:zhangsan@email.com" class="cta-button">发送邮件</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="social-links">
                <a href="#"><i class="fa-brands fa-github"></i></a>
                <a href="#"><i class="fa-brands fa-linkedin"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                <a href="#"><i class="fa-brands fa-codepen"></i></a>
            </div>
            <p>设计并开发 by 张三</p>
        </div>
    </footer>

    <script>
        // 滚动时导航栏效果
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // 标签切换功能
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // 移除所有active类
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));
                
                // 添加active类到当前点击的元素
                button.classList.add('active');
                tabContents[index].classList.add('active');
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>